Angular Material ফর্ম কন্ট্রোলগুলি আপনার অ্যাঙ্গুলার অ্যাপ্লিকেশনে ইনপুট ফিল্ড, সিলেক্ট ড্রপডাউন, চেকবক্স, রেডিও বাটন এবং অন্যান্য ইন্টারঅ্যাকটিভ ফর্ম উপাদান তৈরি করার জন্য ব্যবহৃত হয়। এই ফর্ম কন্ট্রোলগুলি ম্যাটেরিয়াল ডিজাইন গাইডলাইন অনুসরণ করে এবং আধুনিক, রেসপন্সিভ, এবং ব্যবহারকারী-বান্ধব UI তৈরি করতে সহায়তা করে।
Angular Material ফর্ম কন্ট্রোলের মধ্যে রয়েছে:
MatFormFieldModule ব্যবহার করে MatFormField তৈরি করা হয়, যা ইনপুট, সিলেক্ট, চেকবক্স ইত্যাদি কম্পোনেন্টগুলির জন্য একটি কনটেইনার হিসেবে কাজ করে। এটি ফর্ম কন্ট্রোলের জন্য একটি সাধারণ স্টাইল এবং ফাংশনালিটি প্রদান করে।
<mat-form-field>
<mat-label>Enter your name</mat-label>
<input matInput placeholder="Ex. John Doe">
</mat-form-field>
import { MatFormFieldModule } from '@angular/material/form-field';
@NgModule({
imports: [MatFormFieldModule],
})
export class AppModule {}
MatInputModule ব্যবহার করে ইনপুট ফিল্ড তৈরি করা হয়, যা সাধারণত টেক্সট ইনপুট, পাসওয়ার্ড ইনপুট, ইমেইল ইনপুট ইত্যাদি তৈরি করতে ব্যবহৃত হয়। এটি MatFormField এর মধ্যে ব্যবহার করা হয়।
<mat-form-field>
<mat-label>Enter your email</mat-label>
<input matInput type="email" placeholder="Enter your email">
</mat-form-field>
import { MatInputModule } from '@angular/material/input';
@NgModule({
imports: [MatInputModule],
})
export class AppModule {}
MatSelectModule ব্যবহার করে সিলেক্ট ড্রপডাউন তৈরি করা হয়, যা ব্যবহারকারীদের বিভিন্ন অপশন থেকে একটি নির্বাচন করতে সহায়তা করে।
<mat-form-field>
<mat-label>Choose a fruit</mat-label>
<mat-select>
<mat-option value="apple">Apple</mat-option>
<mat-option value="banana">Banana</mat-option>
<mat-option value="orange">Orange</mat-option>
</mat-select>
</mat-form-field>
import { MatSelectModule } from '@angular/material/select';
@NgModule({
imports: [MatSelectModule],
})
export class AppModule {}
MatCheckboxModule ব্যবহার করে চেকবক্স তৈরি করা হয়, যা ব্যবহারকারীদের নির্বাচনের জন্য ব্যবহৃত হয়। এটি সাধারণত ফর্মে চেকবক্স পছন্দ করতে ব্যবহৃত হয়।
<mat-checkbox>Accept terms and conditions</mat-checkbox>
import { MatCheckboxModule } from '@angular/material/checkbox';
@NgModule({
imports: [MatCheckboxModule],
})
export class AppModule {}
MatRadioModule ব্যবহার করে রেডিও বাটন তৈরি করা হয়, যা ব্যবহারকারীদের একাধিক অপশন থেকে একটি নির্বাচন করতে দেয়। এটি সাধারণত radio group হিসেবে ব্যবহৃত হয়।
<mat-radio-group aria-label="Select your favorite animal">
<mat-radio-button value="dog">Dog</mat-radio-button>
<mat-radio-button value="cat">Cat</mat-radio-button>
<mat-radio-button value="rabbit">Rabbit</mat-radio-button>
</mat-radio-group>
import { MatRadioModule } from '@angular/material/radio';
@NgModule({
imports: [MatRadioModule],
})
export class AppModule {}
MatSliderModule ব্যবহার করে স্লাইডার তৈরি করা হয়, যা ব্যবহারকারীদের একটি মান সিলেক্ট করতে সহায়তা করে।
<mat-slider min="1" max="100" step="1" value="50"></mat-slider>
import { MatSliderModule } from '@angular/material/slider';
@NgModule({
imports: [MatSliderModule],
})
export class AppModule {}
MatDatepickerModule ব্যবহার করে একটি ডেট পিকার তৈরি করা হয়, যা ব্যবহারকারীদের তারিখ নির্বাচন করতে সহায়তা করে। এটি সাধারণত ফর্মের জন্য ব্যবহৃত হয়।
<mat-form-field>
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker">
<mat-datepicker-toggle matSuffix [for]="picker"></mat-datepicker-toggle>
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatNativeDateModule } from '@angular/material/core';
@NgModule({
imports: [
MatDatepickerModule,
MatNativeDateModule
],
})
export class AppModule {}
Angular Material এর ফর্ম কন্ট্রোল গুলি ব্যবহার করে আপনি খুব সহজেই উন্নতমানের এবং কাস্টমাইজযোগ্য ফর্ম উপাদান তৈরি করতে পারেন। MatFormField, MatInput, MatSelect, MatCheckbox, MatRadio, MatSlider, এবং MatDatepicker ইত্যাদি ফর্ম কন্ট্রোলগুলি Angular অ্যাপ্লিকেশনগুলির জন্য অত্যন্ত কার্যকর এবং ইন্টারেকটিভ ইউজার ইন্টারফেস তৈরি করতে সহায়তা করে। এগুলো ম্যাটেরিয়াল ডিজাইনের গাইডলাইন অনুসরণ করে এবং ডেভেলপারদের জন্য দ্রুত ফর্ম নির্মাণের সুবিধা প্রদান করে।
Angular Material এর Material Form Field একটি অত্যন্ত গুরুত্বপূর্ণ UI উপাদান যা ফর্ম ইনপুট ফিল্ডগুলোকে সুন্দর, ব্যবহারযোগ্য এবং সহজবোধ্য করে তোলে। এটি ইনপুট ফিল্ডের চারপাশে একটি স্টাইলযুক্ত কনটেইনার প্রদান করে, যা টেক্সট ফিল্ড, সিলেক্ট বক্স, রেডিও বাটন ইত্যাদি ফর্ম কন্ট্রোলকে সঠিকভাবে উপস্থাপন করে। এর সাথে ইনপুট ভ্যালিডেশন, লেবেল এবং প্লেসহোল্ডার প্রপার্টি গুলি যুক্ত করা হয় যা ব্যবহারকারীদের জন্য আরও সহজ এবং আকর্ষণীয় করে তোলে।
Material Form Field ইনপুট ফিল্ডের চারপাশে একটি সুন্দর কনটেইনার প্রদান করে, যা ইনপুট ফিল্ডের সঠিক প্রদর্শন এবং প্রয়োজনীয় লেবেল, প্লেসহোল্ডার, এবং ইনফরমেটিভ টেক্সট সাপোর্ট করে। এর কিছু মূল বৈশিষ্ট্য হলো:
এখানে Material Form Field ব্যবহারের একটি সহজ উদাহরণ দেখানো হলো:
<mat-form-field appearance="fill">
<mat-label>Username</mat-label>
<input matInput placeholder="Enter your username" [(ngModel)]="username">
<mat-hint>Username should be unique</mat-hint>
<mat-error *ngIf="username.hasError('required')">Username is required</mat-error>
</mat-form-field>
<mat-form-field>: এটি মূল কনটেইনার যা ফর্ম ইনপুট ফিল্ডের চারপাশে থাকে।appearance="fill": এটি ইনপুট ফিল্ডের জন্য একটি নির্দিষ্ট স্টাইল প্রদান করে, যেমন 'outline', 'fill', বা 'standard' স্টাইল।<mat-label>: এটি ইনপুট ফিল্ডের লেবেল।matInput: এটি ইনপুট ফিল্ডে ম্যাটেরিয়াল ডিজাইনের স্টাইলিং প্রয়োগ করে।placeholder: ইনপুট ফিল্ডের প্লেসহোল্ডার টেক্সট।<mat-hint>: এটি ইনপুট ফিল্ডের নিচে নির্দেশিকা টেক্সট প্রদান করে।<mat-error>: এটি ইনপুট ফিল্ডের ত্রুটি বার্তা প্রদর্শন করে যখন ইনপুট ফিল্ডটি ভুল হয়।Angular Material Form Field এর জন্য কিছু ভিন্ন appearance অপশন রয়েছে যা ইনপুট ফিল্ডের স্টাইল নির্ধারণ করে।
appearance="fill": এই অপশনটি ইনপুট ফিল্ডকে পূর্ণ রঙের ব্যাকগ্রাউন্ড প্রদান করে।appearance="outline": এটি ইনপুট ফিল্ডের চারপাশে একটি আউটলাইন প্রদর্শন করে।appearance="standard": এটি ডিফল্ট স্টাইল, যেখানে কোনো বিশেষ বর্ডার বা ব্যাকগ্রাউন্ড নেই।<mat-form-field appearance="outline">
<mat-label>Username</mat-label>
<input matInput placeholder="Enter your username" [(ngModel)]="username">
</mat-form-field>
Material Form Field ইনপুট ফিল্ডের জন্য ইনপুট ভ্যালিডেশন সমর্থন করে। <mat-error> ব্যবহার করে আপনি ত্রুটি বার্তা প্রদর্শন করতে পারেন, যখন ইনপুট ফিল্ডে ভুল ইনপুট দেওয়া হয়।
<mat-form-field appearance="fill">
<mat-label>Email</mat-label>
<input matInput [formControl]="email" placeholder="Enter your email">
<mat-error *ngIf="email.invalid && email.touched">Please enter a valid email</mat-error>
</mat-form-field>
[formControl]: এটি ব্যবহার করা হয় ফর্ম কন্ট্রোলের সাথে ইনপুট ফিল্ডকে যুক্ত করার জন্য।*ngIf="email.invalid && email.touched": এটি শুধুমাত্র ত্রুটি বার্তা দেখাবে যদি ইনপুট ফিল্ডটি ত্রুটিপূর্ণ এবং ব্যবহারকারী এটি স্পর্শ করেছে।এছাড়াও, Material Form Field এর মধ্যে Select বক্স ব্যবহার করা যেতে পারে। এটি একটি ড্রপডাউন মেনু তৈরি করে, যেখানে ব্যবহারকারী একটি অপশন নির্বাচন করতে পারে।
<mat-form-field appearance="fill">
<mat-label>Country</mat-label>
<mat-select [(value)]="selectedCountry">
<mat-option value="usa">USA</mat-option>
<mat-option value="canada">Canada</mat-option>
<mat-option value="uk">UK</mat-option>
</mat-select>
</mat-form-field>
<mat-select>: এটি একটি ড্রপডাউন মেনু তৈরি করে।<mat-option>: এটি প্রতিটি অপশন প্রদর্শন করে যা ড্রপডাউন মেনুতে থাকবে।Material Form Field Angular Material এর একটি গুরুত্বপূর্ণ উপাদান যা ফর্ম ইনপুট ফিল্ডগুলোর জন্য সুন্দর, ব্যবহারকারী-বান্ধব এবং স্টাইলযুক্ত কনটেইনার তৈরি করে। এটি লেবেল, প্লেসহোল্ডার, নির্দেশিকা, ত্রুটি বার্তা এবং বিভিন্ন ধরনের কাস্টমাইজেশন সাপোর্ট করে। Angular Material ফর্মের উন্নতমানের ডিজাইন এবং ইনপুট ভ্যালিডেশন ফিচারের জন্য এটি একটি অত্যন্ত কার্যকর টুল।
Angular Material এর Autocomplete কম্পোনেন্ট ব্যবহারকারীদের দ্রুত তথ্য প্রদান এবং তাদের জন্য একটি উন্নত ইউজার ইন্টারফেস তৈরি করার জন্য ব্যবহৃত হয়। এটি সাধারণত ব্যবহারকারীর ইনপুট অনুযায়ী সাজেস্টেড ডেটা বা অপশন প্রদর্শন করতে ব্যবহৃত হয়, যা তাদের টাইপিংয়ের অভিজ্ঞতাকে আরও সহজ এবং দ্রুত করে তোলে।
Angular Material Autocomplete কম্পোনেন্টটি সাধারণত mat-autocomplete ট্যাগ ব্যবহার করে তৈরি হয়, যা একটি ইনপুট ফিল্ডের সাথে যুক্ত থাকে। ব্যবহারকারী যখন ইনপুট দেন, তখন এটি তাদের প্রাথমিক ইনপুটের ভিত্তিতে সাজেস্ট করা অপশনগুলির একটি তালিকা দেখায়।
আপনার অ্যাপ্লিকেশনে Autocomplete কম্পোনেন্ট ব্যবহারের জন্য, প্রথমে Angular Material এর MatAutocompleteModule এবং MatInputModule মডিউলগুলিকে আপনার app.module.ts ফাইলে ইমপোর্ট করতে হবে।
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { MatInputModule } from '@angular/material/input';
@NgModule({
imports: [
MatAutocompleteModule,
MatInputModule
]
})
export class AppModule {}
mat-autocomplete কম্পোনেন্টটি একটি ইনপুট ফিল্ডের সাথে যুক্ত হয় এবং এটি একটি ড্রপডাউন তালিকা হিসেবে সাজেস্টেড অপশনগুলি দেখায়। নিচে একটি সহজ উদাহরণ দেওয়া হলো:
<mat-form-field>
<input matInput [matAutocomplete]="auto" [(ngModel)]="selectedOption" placeholder="Search">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
এখানে:
matInput: এটি ইনপুট ফিল্ডের জন্য Angular Material স্টাইল প্রয়োগ করে।[matAutocomplete]="auto": এটি mat-autocomplete কম্পোনেন্টটি ইনপুট ফিল্ডের সাথে সংযুক্ত করে।filteredOptions: এটি ইনপুটের সাথে মিল রেখে সাজেস্টেড অপশনগুলির একটি তালিকা।Autocomplete কম্পোনেন্টের জন্য অপশনগুলিকে ফিল্টার করার জন্য আপনাকে কিছু কোড লিখতে হবে যাতে ব্যবহারকারী যা টাইপ করছে তা অনুযায়ী সাজেস্ট করা অপশন দেখানো হয়।
নিচে TypeScript ফাইলে filteredOptions কিভাবে তৈরি করতে হয়, তার উদাহরণ দেয়া হলো:
import { Component } from '@angular/core';
@Component({
selector: 'app-autocomplete-example',
templateUrl: 'autocomplete-example.component.html',
})
export class AutocompleteExampleComponent {
options: string[] = ['Apple', 'Banana', 'Cherry', 'Date', 'Grape', 'Lemon', 'Mango', 'Orange', 'Papaya'];
filteredOptions: string[] = [];
selectedOption: string;
filterOptions(value: string): void {
this.filteredOptions = this.options.filter(option => option.toLowerCase().includes(value.toLowerCase()));
}
}
এখানে:
options: এটি একটি অ্যারে যা সমস্ত সম্ভাব্য অপশন ধারণ করে।filteredOptions: এটি ব্যবহারকারীর ইনপুটের উপর ভিত্তি করে ফিল্টার করা অপশনগুলির অ্যারে।filterOptions(): এই মেথডটি ইনপুটের মানের উপর ভিত্তি করে অপশনগুলিকে ফিল্টার করে।এখন, যখন ব্যবহারকারী ইনপুট দেবে, তখন filterOptions মেথডটি কল হবে এবং filteredOptions আপডেট হবে, যার মাধ্যমে mat-option এলিমেন্টগুলির তালিকা পরিবর্তিত হবে।
আপনি সহজেই Angular Material এর মাধ্যমে ইনপুট ফিল্ড এবং সাজেস্টেড অপশনগুলির স্টাইল কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, আপনি mat-form-field এর মধ্যে বিভিন্ন স্টাইল যোগ করতে পারেন, যেমন:
<mat-form-field appearance="fill">
<input matInput [matAutocomplete]="auto" [(ngModel)]="selectedOption" placeholder="Search">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of filteredOptions" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
এখানে appearance="fill" স্টাইলটি ইনপুট ফিল্ডের প্রেক্ষাপট পরিবর্তন করে।
mat-autocomplete এ আপনি কাস্টম টেমপ্লেট ব্যবহার করে সাজেস্টেড অপশনগুলির জন্য আরও বিস্তারিত কনটেন্ট প্রদর্শন করতে পারেন, যেমন আইকন বা অন্যান্য HTML উপাদান।Angular Material এর Autocomplete কম্পোনেন্ট ব্যবহার করে আপনি একটি দ্রুত, ইন্টারঅ্যাকটিভ এবং ব্যবহারকারী-বান্ধব অনুসন্ধান বা সাজেশন সিস্টেম তৈরি করতে পারবেন। এটি ইনপুট ফিল্ডের সাথে অটো সাজেস্ট অপশন প্রদর্শন করতে সহায়ক, যা ব্যবহারকারীর টাইপিং অভিজ্ঞতাকে আরও সহজ এবং দ্রুত করে তোলে। mat-autocomplete ব্যবহার করে আপনি ফিল্টারিং, স্টাইলিং এবং কাস্টমাইজেশন সহজেই করতে পারেন।
Angular Material এর Autocomplete কম্পোনেন্টটি একটি অত্যন্ত শক্তিশালী এবং প্রয়োজনীয় UI উপাদান, যা ব্যবহারকারীদের টাইপ করার সময় তাদের জন্য প্রাসঙ্গিক সুপারিশ (suggestions) প্রদর্শন করে। এটি Reactive Forms এর সাথে একসাথে ব্যবহার করতে অত্যন্ত সুবিধাজনক, যেখানে আপনি সহজেই ইউজারের ইনপুট ভ্যালু চেক করতে এবং সুপারিশ সিস্টেম তৈরি করতে পারেন।
এখানে আমরা Angular Material Autocomplete কম্পোনেন্টটি কিভাবে Reactive Forms এর সাথে ব্যবহার করা যায় তা দেখব।
প্রথমে, আপনাকে MatAutocompleteModule এবং ReactiveFormsModule ইমপোর্ট করতে হবে।
app.module.ts ফাইলে MatAutocompleteModule এবং ReactiveFormsModule ইমপোর্ট করুন:
import { MatAutocompleteModule } from '@angular/material/autocomplete';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
AppComponent
],
imports: [
MatAutocompleteModule,
ReactiveFormsModule
],
bootstrap: [AppComponent]
})
export class AppModule { }
React Forms ব্যবহার করতে, আপনাকে প্রথমে FormGroup এবং FormControl ব্যবহার করে একটি রিঅ্যাকটিভ ফর্ম তৈরি করতে হবে। নিচে একটি উদাহরণ দেওয়া হল, যেখানে Autocomplete এর জন্য একটি ফর্ম কন্ট্রোল তৈরি করা হয়েছে।
import { Component } from '@angular/core';
import { FormGroup, FormControl } from '@angular/forms';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
searchForm: FormGroup;
options: string[] = ['Apple', 'Banana', 'Orange', 'Mango', 'Pineapple', 'Peach'];
constructor() {
this.searchForm = new FormGroup({
search: new FormControl('')
});
}
}
এখানে options অ্যারে একটি সাধারণ ফলের তালিকা, যা Autocomplete কম্পোনেন্টে প্রস্তাব হিসেবে ব্যবহার হবে।
Angular Material এর mat-autocomplete কম্পোনেন্টটি ব্যবহার করতে, HTML ফাইলে এটি কনফিগার করতে হবে।
<form [formGroup]="searchForm">
<mat-form-field appearance="fill">
<mat-label>Search for fruits</mat-label>
<input matInput [matAutocomplete]="auto" formControlName="search">
<mat-autocomplete #auto="matAutocomplete">
<mat-option *ngFor="let option of options | filter:searchForm.value.search" [value]="option">
{{ option }}
</mat-option>
</mat-autocomplete>
</mat-form-field>
</form>
এখানে:
mat-form-field: Angular Material এর ফর্ম ফিল্ড কম্পোনেন্ট, যেটি ইনপুট এবং অন্যান্য ফর্ম উপাদানগুলি সুন্দরভাবে প্রদর্শন করতে সহায়ক।mat-autocomplete: এটি ব্যবহারকারীর টাইপ করার সময় প্রাসঙ্গিক সুপারিশ প্রদর্শন করে।*ngFor: এই ডিরেকটিভের মাধ্যমে options অ্যারে থেকে প্রতিটি অপশন দেখানো হচ্ছে।filter: এখানে আমরা filter পাইপ ব্যবহার করেছি যা ডাটা ফিল্টার করার জন্য, তবে এটি আলাদা পাইপ তৈরি করতে হতে পারে (যেমন, search ফিল্টার করতে)।আমরা Autocomplete কম্পোনেন্টের মধ্যে একটি filter পাইপ ব্যবহার করেছি যাতে ইউজারের ইনপুট অনুযায়ী অটোকমপ্লিটের রেজাল্টস ফিল্টার করা যায়। তবে Angular এর নিজস্ব filter pipe নেই, তাই আপনাকে নিজেই একটি filter পাইপ তৈরি করতে হবে।
import { Pipe, PipeTransform } from '@angular/core';
@Pipe({
name: 'filter'
})
export class FilterPipe implements PipeTransform {
transform(items: any[], searchText: string): any[] {
if (!items) return [];
if (!searchText) return items;
searchText = searchText.toLowerCase();
return items.filter(item => item.toLowerCase().includes(searchText));
}
}
এটি একটি কাস্টম পাইপ যা ব্যবহারকারীর ইনপুটের সাথে তালিকা ফিল্টার করবে।
এখন আপনি যখন অ্যাপ্লিকেশন চালাবেন, তখন Reactive Form এর মাধ্যমে আপনি Autocomplete কম্পোনেন্ট ব্যবহার করতে পারবেন, এবং ব্যবহারকারীর ইনপুট অনুযায়ী প্রাসঙ্গিক ফলের নাম দেখাবে।
Angular Material Autocomplete কম্পোনেন্টটি Reactive Forms এর সাথে একত্রে ব্যবহার করে একটি অত্যন্ত শক্তিশালী এবং ইন্টারেক্টিভ ইউজার ইন্টারফেস তৈরি করা সম্ভব। এটি search, filtering, এবং suggestions ফিচারগুলিকে সহজভাবে ইমপ্লিমেন্ট করতে সহায়তা করে। FormControl এবং FormGroup ব্যবহার করে ইনপুট ভ্যালু ট্র্যাক করা যায় এবং ডেটা বাইন্ডিংয়ের মাধ্যমে ব্যবহারকারীর সঠিক অভিজ্ঞতা প্রদান করা হয়।
Angular Material Datepicker একটি প্রি-বিল্ট UI কম্পোনেন্ট যা ব্যবহারকারীদের তারিখ নির্বাচন করতে সহায়তা করে। এটি Material Design গাইডলাইন অনুসরণ করে এবং ডেভেলপারদের জন্য সহজে কাস্টমাইজযোগ্য, রেসপন্সিভ এবং সুন্দর একটি ডেটপিকার তৈরি করতে সহায়ক। অ্যাঙ্গুলার ম্যাটেরিয়াল ডেটপিকার ইনপুট ফিল্ডের সাথে একত্রিত হয়ে ব্যবহারকারীদের একটি ক্যালেন্ডার ইন্টারফেস প্রদান করে, যার মাধ্যমে তারা একটি নির্দিষ্ট তারিখ নির্বাচন করতে পারেন।
ডেটপিকার ব্যবহারের জন্য আপনাকে কিছু মৌলিক পদক্ষেপ অনুসরণ করতে হবে। এগুলো হল:
প্রথমে MatDatepickerModule এবং MatInputModule ইমপোর্ট করতে হবে যাতে আপনি ডেটপিকার এবং ইনপুট ফিল্ড ব্যবহার করতে পারেন। app.module.ts ফাইলে এটি ইমপোর্ট করুন:
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core'; // নেটিভ ডেট ফরম্যাট সাপোর্ট করতে
@NgModule({
declarations: [AppComponent],
imports: [
MatDatepickerModule, // ডেটপিকার মডিউল
MatInputModule, // ইনপুট মডিউল
MatNativeDateModule, // নেটিভ ডেট সাপোর্ট
],
bootstrap: [AppComponent]
})
export class AppModule { }
এখন, HTML ফাইলে ডেটপিকার ব্যবহার করার জন্য mat-datepicker ডিরেকটিভ ব্যবহার করুন।
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Choose a date">
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
এখানে, mat-datepicker একটি ক্যালেন্ডার ডেটপিকার তৈরি করবে এবং matInput এটিকে ইনপুট ফিল্ডের সাথে একত্রিত করবে।
ডেটপিকার পপআপের জন্য কাস্টম স্টাইল এবং ফিল্ড প্লেসহোল্ডারও নির্ধারণ করা যায়। আপনি চাইলে ক্যালেন্ডার ডিজাইন এবং এর অন্যান্য ফিচার কাস্টমাইজ করতে পারেন। উদাহরণস্বরূপ, ডেটপিকার ইনপুট ফিল্ডের প্লেসহোল্ডার কাস্টমাইজ করা:
<mat-form-field>
<input matInput [matDatepicker]="picker" placeholder="Select your birthdate" [(ngModel)]="birthDate">
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
ডেটপিকারকে ডিফল্ট তারিখের জন্য ইনিশিয়ালাইজ করা যেতে পারে। আপনি ngModel বা FormControl এর মাধ্যমে ডেটপিকার এর মান অ্যাসাইন করতে পারেন।
export class AppComponent {
birthDate: Date = new Date(2000, 1, 1); // ডিফল্ট তারিখ
}
এখন birthDate হবে ডিফল্ট মান, যা ডেটপিকার ফিল্ডে প্রদর্শিত হবে।
ডেটপিকার ইনপুট ফিল্ডে আপনি একটি কাস্টম ডেট ফরম্যাট ব্যবহার করতে পারেন, যেমন:
import { MAT_DATE_FORMATS } from '@angular/material/core';
export const MY_DATE_FORMATS = {
parse: {
dateInput: 'LL', // মাস/দিন/বছর ফরম্যাট
},
display: {
dateInput: 'LL', // মাস/দিন/বছর ফরম্যাট
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'LL',
monthYearA11yLabel: 'MMMM YYYY',
},
};
@NgModule({
providers: [
{ provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS }
]
})
এখন ডেটপিকার ইনপুট ফিল্ডে আপনি কাস্টম ডেট ফরম্যাট দেখতে পাবেন।
আপনি ডেটপিকারকে রেঞ্জ সিলেকশন করার জন্যও কাস্টমাইজ করতে পারেন, যেখানে ব্যবহারকারী একটি নির্দিষ্ট সময়ের মধ্যে তারিখ নির্বাচন করতে পারবেন।
<mat-form-field>
<input matInput [matDatepicker]="startDate" placeholder="Start Date">
<mat-datepicker #startDate></mat-datepicker>
</mat-form-field>
<mat-form-field>
<input matInput [matDatepicker]="endDate" placeholder="End Date">
<mat-datepicker #endDate></mat-datepicker>
</mat-form-field>
এটি একটি সাধারণ তারিখ রেঞ্জ নির্বাচন ইন্টারফেস তৈরি করবে।
Angular এর Reactive Forms এবং ngModel এর মাধ্যমে ডেটপিকারকে ডেটা বাইন্ডিং করতে পারেন।
import { FormControl } from '@angular/forms';
export class AppComponent {
date = new FormControl(new Date());
}
এটি আপনাকে ডেটপিকার ব্যবহার করতে সহায়তা করবে এবং ফর্মের একটি অংশ হিসেবে মান ট্র্যাক করবে।
<mat-form-field>
<input matInput [matDatepicker]="picker" [formControl]="date">
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
Angular Material Datepicker ব্যবহারকারীদের জন্য কিছু কাস্টমাইজেশন ফিচার সরবরাহ করে:
// Disable weekends (Saturday and Sunday)
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
export class AppComponent {
disableWeekends(date: Date | null): boolean {
const day = (date || new Date()).getDay();
return day === 0 || day === 6; // Disable Sunday and Saturday
}
}
<mat-form-field>
<input matInput [matDatepicker]="picker" [matDatepickerFilter]="disableWeekends">
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
Angular Material Datepicker একটি শক্তিশালী এবং সহজে কাস্টমাইজযোগ্য কম্পোনেন্ট, যা Angular অ্যাপ্লিকেশনের জন্য একটি আধুনিক এবং রেসপন্সিভ তারিখ নির্বাচন সিস্টেম সরবরাহ করে। এটি বিভিন্ন কাস্টমাইজেশন সুবিধা সহ আসে, যেমন ডেট ফরম্যাট কাস্টমাইজেশন, রেঞ্জ সিলেকশন, এবং ডিসেবল/এনাবল ডেট কাস্টমাইজেশন। এটি ব্যবহারকারীদের একটি উন্নত এবং সহজ অভিজ্ঞতা প্রদান করে, বিশেষ করে যখন অ্যাপ্লিকেশনে তারিখ নির্বাচন প্রয়োজন হয়।
Angular Material এর <mat-datepicker> কম্পোনেন্ট ব্যবহার করে সহজেই ডেটপিকার তৈরি করা যায়, যা ব্যবহারকারীদের তারিখ নির্বাচন করার সুবিধা প্রদান করে। ডেটপিকারটি Material Design এর গাইডলাইন অনুসরণ করে এবং অ্যাপ্লিকেশনে সুন্দরভাবে একত্রিত হয়।
ডেটপিকার কনফিগার করার জন্য, Angular Material এর MatDatepickerModule এবং MatInputModule মডিউল দুটি ইমপোর্ট করতে হবে।
প্রথমে, আপনাকে Angular অ্যাপ্লিকেশনে MatDatepickerModule এবং MatInputModule মডিউলগুলো ইমপোর্ট করতে হবে।
app.module.ts ফাইলে ইমপোর্ট করুন:
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [
// আপনার কম্পোনেন্ট
],
imports: [
// অন্যান্য মডিউলস
MatDatepickerModule,
MatInputModule,
MatNativeDateModule, // Native datepicker প্রদান করে
ReactiveFormsModule
]
})
export class AppModule { }
ডেটপিকার ব্যবহার করার জন্য HTML টেমপ্লেটে <mat-datepicker> কম্পোনেন্ট ব্যবহার করা হয়। ডেটপিকার কম্পোনেন্টের সাথে <input matInput> এবং matDatepicker ডিরেকটিভ ব্যবহার করতে হবে।
<mat-form-field>
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker" placeholder="Select a date">
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
এখানে:
<input matInput> ডেটপিকার ইনপুট ফিল্ড।[matDatepicker]="picker" নির্দেশনা, যেখানে picker হলো ডেটপিকার টেমপ্লেট রেফারেন্স।<mat-datepicker #picker></mat-datepicker> ডেটপিকার কম্পোনেন্ট যা তারিখ নির্বাচন করার ইন্টারফেস প্রদান করে।আপনি ডেটপিকারটি কাস্টমাইজ করতে পারেন, যেমন তারিখের ফরম্যাট, সীমাবদ্ধতা ইত্যাদি। নিচে কিছু সাধারণ কনফিগারেশন উদাহরণ দেওয়া হলো।
ডেটপিকারটি কাস্টম তারিখ ফরম্যাটে প্রদর্শন করতে হলে, MAT_DATE_FORMATS কনফিগারেশন ব্যবহার করতে হবে।
import { MAT_DATE_FORMATS } from '@angular/material/core';
export const MY_DATE_FORMATS = {
parse: {
dateInput: 'YYYY/MM/DD',
},
display: {
dateInput: 'YYYY/MM/DD',
monthYearLabel: 'MMM YYYY',
dateA11yLabel: 'YYYY/MM/DD',
monthYearA11yLabel: 'MMMM YYYY',
},
};
@NgModule({
providers: [
{ provide: MAT_DATE_FORMATS, useValue: MY_DATE_FORMATS },
],
})
export class AppModule { }
এখানে তারিখ YYYY/MM/DD ফরম্যাটে প্রদর্শিত হবে।
আপনি একটি নির্দিষ্ট তারিখ রেঞ্জ সিলেকশন কনফিগার করতে পারেন, যেমন আজকের তারিখ থেকে আগামী মাস পর্যন্ত।
import { Component, OnInit } from '@angular/core';
import { MatDatepickerInputEvent } from '@angular/material/datepicker';
import { FormControl } from '@angular/forms';
@Component({
selector: 'app-datepicker-range',
templateUrl: './datepicker-range.component.html',
styleUrls: ['./datepicker-range.component.css']
})
export class DatepickerRangeComponent implements OnInit {
minDate: Date;
maxDate: Date;
ngOnInit() {
this.minDate = new Date();
this.maxDate = new Date();
this.maxDate.setMonth(this.maxDate.getMonth() + 1); // ১ মাস পরের তারিখ
}
}
এখানে, minDate এবং maxDate ব্যবহার করে ডেটপিকারটির জন্য রেঞ্জ সেট করা হচ্ছে।
HTML:
<mat-form-field>
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker" [min]="minDate" [max]="maxDate" placeholder="Select a date">
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
আপনি যখন তারিখ নির্বাচন করবেন, তখন সেই মানটি ngModel বা FormControl এর মাধ্যমে আপনার টাইপস্ক্রিপ্ট কোডে পেতে পারেন।
<mat-form-field>
<mat-label>Choose a date</mat-label>
<input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate" placeholder="Select a date">
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<p>Selected Date: {{ selectedDate | date }}</p>
TypeScript:
export class DatepickerComponent {
selectedDate: Date;
}
Angular Material এর mat-datepicker কম্পোনেন্ট ব্যবহার করে আপনি সহজেই একটি তারিখ নির্বাচনকারী ফিল্ড তৈরি করতে পারেন। এটি অনেক ধরনের কনফিগারেশন সমর্থন করে, যেমন তারিখ ফরম্যাট কাস্টমাইজেশন, রেঞ্জ নির্ধারণ, এবং অন্যান্য ফিচার। Angular Material ডেটপিকার ব্যবহারের মাধ্যমে একটি সুন্দর এবং কার্যকরী UI তৈরি করা যায় যা ব্যবহারকারীর অভিজ্ঞতাকে উন্নত করে।
Angular Material এর MatDatepicker কম্পোনেন্ট ব্যবহার করে আপনি ডেট পিকার (Date Picker) তৈরি করতে পারেন। ডেট ফরম্যাট কাস্টমাইজ করা একটি সাধারণ চাহিদা, বিশেষত যখন আপনার অ্যাপ্লিকেশনের জন্য নির্দিষ্ট ডেট ফরম্যাট (যেমন dd/MM/yyyy, yyyy-MM-dd ইত্যাদি) প্রয়োজন হয়।
Angular Material এর MatDatepicker এবং Angular's DatePipe ব্যবহার করে ডেট ফরম্যাট কাস্টমাইজ করা যায়।
প্রথমে, MatDatepickerModule এবং MatNativeDateModule অথবা MatMomentDateModule (যদি আপনি Moment.js ব্যবহার করেন) আপনার app.module.ts ফাইলে ইমপোর্ট করতে হবে।
import { MatDatepickerModule } from '@angular/material/datepicker';
import { MatInputModule } from '@angular/material/input';
import { MatNativeDateModule } from '@angular/material/core'; // Native date handling
import { FormsModule } from '@angular/forms';
@NgModule({
imports: [
MatDatepickerModule,
MatInputModule,
MatNativeDateModule,
FormsModule
]
})
export class AppModule {}
এখানে MatNativeDateModule ব্যবহার করা হয়েছে, যা ডিফল্টভাবে JavaScript এর Date অবজেক্ট ব্যবহার করে।
এখন, আপনি <mat-datepicker> কম্পোনেন্ট ব্যবহার করে ডেট পিকার তৈরি করতে পারেন এবং ডেট ফরম্যাট কাস্টমাইজ করতে পারেন।
<mat-form-field appearance="fill">
<mat-label>Pick a date</mat-label>
<input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate">
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
এখানে [(ngModel)]="selectedDate" ব্যবহার করে আপনি ডেট পিকার থেকে নির্বাচিত তারিখ সংগ্রহ করছেন।
ডেট ফরম্যাট কাস্টমাইজ করতে, Angular এর DatePipe ব্যবহার করা হয়। এটি Angular এর বিল্ট-ইন পিপ (Pipe), যা ডেটাকে আপনার প্রয়োজন অনুযায়ী ফরম্যাট করে।
import { Component } from '@angular/core';
import { DatePipe } from '@angular/common';
@Component({
selector: 'app-date-picker',
templateUrl: './date-picker.component.html',
styleUrls: ['./date-picker.component.css'],
providers: [DatePipe]
})
export class DatePickerComponent {
selectedDate: Date;
constructor(private datePipe: DatePipe) {}
getFormattedDate() {
// Date format: dd/MM/yyyy
return this.datePipe.transform(this.selectedDate, 'dd/MM/yyyy');
}
}
এখানে, getFormattedDate() মেথডটি selectedDate ফরম্যাট করবে, যা আপনি HTML টেমপ্লেটে ব্যবহার করতে পারবেন।
আপনি Angular's DatePipe ব্যবহার করে ফরম্যাট করা তারিখটি HTML টেমপ্লেটে প্রদর্শন করতে পারেন।
<div>
<mat-form-field appearance="fill">
<mat-label>Pick a date</mat-label>
<input matInput [matDatepicker]="picker" [(ngModel)]="selectedDate">
<mat-datepicker #picker></mat-datepicker>
</mat-form-field>
<p>Selected Date: {{ getFormattedDate() }}</p>
</div>
এখানে, getFormattedDate() মেথডটি selectedDate কে dd/MM/yyyy ফরম্যাটে রূপান্তরিত করবে এবং HTML-এ প্রদর্শিত হবে।
আপনি যদি Moment.js ব্যবহার করতে চান, তাহলে MatMomentDateModule ব্যবহার করতে হবে। এটি Moment.js এর সাথে Angular Material এর ডেট পিকারকে একত্রিত করতে সহায়তা করে।
প্রথমে, moment এবং @angular/material-moment-adapter ইন্সটল করুন:
npm install moment
npm install @angular/material-moment-adapter
এখন, MatMomentDateModule ব্যবহার করে ডেট পিকার তৈরি করতে পারেন:
import { MatMomentDateModule } from '@angular/material-moment-adapter';
@NgModule({
imports: [
MatMomentDateModule
]
})
export class AppModule {}
এখন, আপনি Moment.js এর ফরম্যাট ব্যবহার করে ডেট কাস্টমাইজ করতে পারবেন:
import * as moment from 'moment';
@Component({
selector: 'app-date-picker',
templateUrl: './date-picker.component.html',
styleUrls: ['./date-picker.component.css']
})
export class DatePickerComponent {
selectedDate: moment.Moment;
getFormattedDate() {
// Moment.js এর মাধ্যমে কাস্টম ফরম্যাট
return this.selectedDate.format('DD/MM/YYYY');
}
}
এখানে, getFormattedDate() মেথডটি Moment.js ব্যবহার করে ডেটাকে DD/MM/YYYY ফরম্যাটে কাস্টমাইজ করছে।
Angular Material এর ডেট পিকার কম্পোনেন্ট ব্যবহার করে আপনি সহজেই কাস্টম ডেট ফরম্যাট প্রয়োগ করতে পারেন। Angular's DatePipe বা Moment.js ব্যবহার করে ডেট ফরম্যাট কাস্টমাইজ করা সম্ভব। Angular Material এর ডেট পিকার কম্পোনেন্ট অ্যাপ্লিকেশনে ব্যবহারকারীর জন্য একটি সুন্দর, ইন্টারঅ্যাকটিভ এবং ফাংশনাল ডেট পিকার প্রদান করে, যা ব্যবহারকারীদের জন্য সহজেই তারিখ নির্বাচন এবং প্রদর্শন করার সুযোগ দেয়।
Angular Material Slider একটি ইন্টারঅ্যাকটিভ উপাদান, যা ব্যবহারকারীদের মান নির্বাচন করতে একটি স্লাইডিং স্কেল প্রদান করে। এটি একটি সাধারণ এবং শক্তিশালী উপাদান, যা মূলত সংখ্যা বা মান পরিবর্তন করার জন্য ব্যবহার করা হয়। Angular Material এর MatSlider কম্পোনেন্টটি আপনাকে একটি সুন্দর এবং আধুনিক স্লাইডার তৈরি করতে সহায়তা করে, যা Material Design গাইডলাইন অনুসরণ করে।
প্রথমে Angular Material ইন্সটল করা থাকতে হবে। যদি Angular Material ইতিমধ্যেই ইন্সটল না করা থাকে, তাহলে নিচের কমান্ডটি ব্যবহার করে এটি ইন্সটল করুন:
ng add @angular/material
এখন MatSliderModule ব্যবহার করতে হবে, যা স্লাইডার কম্পোনেন্ট সরবরাহ করে। এটি আপনার app.module.ts ফাইলে ইমপোর্ট করুন:
import { MatSliderModule } from '@angular/material/slider';
@NgModule({
imports: [
MatSliderModule
]
})
export class AppModule { }
এখন আপনি MatSlider কম্পোনেন্ট ব্যবহার করে স্লাইডার তৈরি করতে পারবেন। নিচে একটি সাধারণ উদাহরণ দেয়া হলো:
<mat-slider min="1" max="100" step="1" value="50"></mat-slider>
এখানে:
এটি একটি সাধারণ স্লাইডার তৈরি করবে, যা 1 থেকে 100 পর্যন্ত মান গ্রহণ করতে পারে এবং প্রতি একক পরিমাণে মান পরিবর্তন করবে।
আপনি স্লাইডার এর মান টাইপস্ক্রিপ্টে ব্যবহার করতে চাইলে, Angular এর ngModel ব্যবহার করতে পারেন। এতে স্লাইডারের মান ডাইনামিকভাবে টাইপস্ক্রিপ্ট ভেরিয়েবল এর সাথে সংযুক্ত হবে।
<mat-slider [(ngModel)]="sliderValue" min="1" max="100" step="1" value="50"></mat-slider>
<p>Slider Value: {{ sliderValue }}</p>
এখানে, sliderValue একটি টাইপস্ক্রিপ্ট ভ্যারিয়েবল যা স্লাইডার এর মান ধারণ করবে। এর মান পরিবর্তন হলে তা HTML পেজে রিয়েল-টাইমে প্রদর্শিত হবে।
import { Component } from '@angular/core';
@Component({
selector: 'app-slider',
templateUrl: './slider.component.html',
styleUrls: ['./slider.component.css']
})
export class SliderComponent {
sliderValue = 50; // ডিফল্ট মান
}
এখন, স্লাইডারটি মুভ করলে sliderValue ভ্যারিয়েবলটি আপডেট হবে এবং HTML পেজে তা প্রদর্শিত হবে।
Angular Material এর MatSlider কম্পোনেন্ট ডিফল্টভাবে একটি সুন্দর ডিজাইন সরবরাহ করে, তবে আপনি চাইলে এটি কাস্টমাইজ করতে পারেন।
mat-slider {
width: 100%;
margin: 20px 0;
}
এটি স্লাইডারের প্রশস্ততা এবং মার্জিন কাস্টমাইজ করবে।
আপনি চাইলে স্লাইডারের মান দেখতে একটি টুলটিপ যোগ করতে পারেন। এর জন্য matTooltip ব্যবহার করা হয়।
<mat-slider [(ngModel)]="sliderValue" min="1" max="100" step="1" value="50" matTooltip="Value: {{ sliderValue }}"></mat-slider>
এটি স্লাইডারের মান পরিবর্তনের সময় একটি টুলটিপ দেখাবে।
আপনি একাধিক স্লাইডার তৈরি করতে পারেন এবং তাদের মান সিঙ্ক্রোনাইজ করতে পারেন।
<mat-slider [(ngModel)]="sliderValue" min="0" max="100" step="1"></mat-slider>
<mat-slider [(ngModel)]="sliderValue" min="0" max="100" step="1"></mat-slider>
এখানে, দুইটি স্লাইডারের মান একই থাকবে কারণ তারা একে অপরের সাথে সংযুক্ত।
Angular Material স্লাইডারটির জন্য আপনি একাধিক ডিজাইন অপশন কাস্টমাইজ করতে পারেন, যেমন tickInterval, thumbLabel, vertical ইত্যাদি।
<mat-slider [(ngModel)]="sliderValue" min="0" max="100" step="1" tickInterval="10" thumbLabel vertical></mat-slider>
Angular Material Slider একটি শক্তিশালী এবং ব্যবহারকারী-বান্ধব কম্পোনেন্ট, যা ব্যবহারকারীদের নির্দিষ্ট মান সিলেক্ট করতে সাহায্য করে। আপনি এটি ngModel বা FormControl এর মাধ্যমে টাইপস্ক্রিপ্ট ভেরিয়েবলের সাথে যুক্ত করতে পারেন। স্লাইডারটি কাস্টমাইজ করার মাধ্যমে আপনি একটি আধুনিক, রেসপন্সিভ এবং ইউজার-বান্ধব ইন্টারফেস তৈরি করতে পারবেন। Angular Material স্লাইডার ব্যবহার করে আপনি আপনার অ্যাপ্লিকেশনকে আরও ইন্টারঅ্যাক্টিভ এবং আধুনিকভাবে ডিজাইন করতে পারেন।
Angular Material এ রেঞ্জ স্লাইডার তৈরি করা খুবই সহজ এবং এটি ব্যবহারকারীদের জন্য একটি সুন্দর এবং ইন্টারেক্টিভ উপায় হিসেবে কাজ করে। রেঞ্জ স্লাইডার সাধারণত দুটি মানের মধ্যে একটি মান নির্বাচন করতে ব্যবহৃত হয়, যেমন—কম এবং বেশি। অ্যাঙ্গুলার ম্যাটেরিয়াল mat-slider কম্পোনেন্ট ব্যবহার করে সহজেই রেঞ্জ স্লাইডার তৈরি করা যায়।
প্রথমে, আপনাকে MatSliderModule মডিউলটি অ্যাপ্লিকেশনে ইমপোর্ট করতে হবে। এটি app.module.ts ফাইলে করা যাবে।
import { MatSliderModule } from '@angular/material/slider';
@NgModule({
imports: [
MatSliderModule
]
})
export class AppModule { }
mat-slider কম্পোনেন্ট ব্যবহার করে একটি রেঞ্জ স্লাইডার তৈরি করা যেতে পারে। এটি min, max, এবং step প্রপার্টি সহ কাস্টমাইজ করা যায়।
<mat-slider min="1" max="100" step="1" value="50"></mat-slider>
এখানে:
min: স্লাইডারের সর্বনিম্ন মানmax: স্লাইডারের সর্বোচ্চ মানstep: স্লাইডারের প্রতিটি পদক্ষেপের মানvalue: ডিফল্ট মান, যা স্লাইডারের প্রাথমিক অবস্থান নির্ধারণ করেস্লাইডারের মান ট্র্যাক করার জন্য আপনি ngModel ডিরেকটিভ ব্যবহার করতে পারেন। এটি আপনাকে স্লাইডারের মান পরিবর্তন হলে তা আপনার টাইপস্ক্রিপ্ট ফাইলে ধারণ করতে সাহায্য করবে।
<mat-slider min="1" max="100" step="1" [(ngModel)]="sliderValue"></mat-slider>
<p>Selected value: {{ sliderValue }}</p>
এখানে, [(ngModel)]="sliderValue" স্লাইডারের মান sliderValue নামক টাইপস্ক্রিপ্ট ফাইলে ধারণ করবে এবং প্যারাগ্রাফে প্রদর্শিত হবে।
এখন, টাইপস্ক্রিপ্ট ফাইলে sliderValue নামক একটি ভেরিয়েবল ডিফাইন করুন।
import { Component } from '@angular/core';
@Component({
selector: 'app-slider-example',
templateUrl: './slider-example.component.html',
styleUrls: ['./slider-example.component.css']
})
export class SliderExampleComponent {
sliderValue: number = 50; // ডিফল্ট মান
}
এখন, আপনি যখন স্লাইডারটি হেলানো হবে, তখন sliderValue এর মান পরিবর্তিত হবে এবং তা HTML এ প্রদর্শিত হবে।
Angular Material এর রেঞ্জ স্লাইডারকে কাস্টমাইজ করার জন্য CSS ব্যবহার করা যায়। আপনি স্লাইডারের থাম্ব, ট্র্যাক এবং অন্যান্য অংশ স্টাইল করতে পারেন।
mat-slider {
width: 100%;
}
.mat-slider-thumb {
background-color: #4caf50; /* থাম্বের রং পরিবর্তন */
}
.mat-slider-track-fill {
background-color: #3f51b5; /* ট্র্যাকের পূর্ণ অংশের রং */
}
আপনি চাইলে স্লাইডারটি ডিজেবল করতে পারেন, যাতে ব্যবহারকারী সেটি ইন্টারঅ্যাক্ট করতে না পারে।
<mat-slider min="1" max="100" step="1" value="50" disabled></mat-slider>
ডিসক্রিট স্লাইডার ব্যবহার করলে স্লাইডারটি নির্দিষ্ট মানের মধ্যে সীমাবদ্ধ থাকবে, এবং এটি মানের মধ্যে কেবল নির্দিষ্ট কদমে পরিবর্তিত হবে। এটি tickInterval প্রপার্টি দ্বারা কনফিগার করা যায়।
<mat-slider min="1" max="100" step="1" [(ngModel)]="sliderValue" tickInterval="10"></mat-slider>
এখানে tickInterval="10" স্লাইডারের প্রতি দশমিক পরিমাণে মান পরিবর্তন করবে।
ডিফল্টভাবে, Angular Material এর স্লাইডার হরিজেন্টাল (আনুভূমিক) থাকে। তবে আপনি চাইলে স্লাইডারটি উল্লম্বও করতে পারেন।
<mat-slider min="1" max="100" step="1" value="50" vertical></mat-slider>
এটি স্লাইডারটি উল্লম্বভাবে দেখাবে, যা ব্যবহারকারীকে উপর থেকে নিচে স্লাইড করতে সক্ষম করবে।
Angular Material এর mat-slider কম্পোনেন্ট ব্যবহার করে সহজেই রেঞ্জ স্লাইডার তৈরি করা যায়, যা ব্যবহারকারীদের জন্য একটি ইন্টারেক্টিভ উপায় হিসেবে কাজ করে। আপনি এটি বিভিন্ন কাস্টমাইজেশন অপশন যেমন min, max, step, tickInterval, এবং vertical প্রপার্টি ব্যবহার করে কাস্টমাইজ করতে পারেন। এটি আপনার অ্যাপ্লিকেশনে আরও ইউজার ফ্রেন্ডলি এবং ইন্টারেক্টিভ ইন্টারফেস তৈরি করতে সাহায্য করবে।
Angular Material Slide Toggle কম্পোনেন্ট একটি বেসিক টগল সুইচ প্রদান করে, যা সাধারণত কোনো বাইনরি অপশন (যেমন চালু/বন্ধ) পরিবর্তন করতে ব্যবহৃত হয়। এটি Material Design এর একটি অংশ এবং ব্যবহারকারীদের জন্য একটি সুন্দর এবং সহজে ইন্টারঅ্যাক্টিভ টগল সুইচ তৈরি করতে সাহায্য করে।
এটি অনেক ধরনের অ্যাপ্লিকেশন এবং সেটিংসে ব্যবহৃত হয়, যেমন অথরাইজেশন সিস্টেমে, নোটিফিকেশন সেটিংস, ডার্ক মোড/লাইট মোড স্যুইচ, এবং আরও অনেক কিছু।
MatSlideToggle কম্পোনেন্ট দিয়ে আপনি একটি স্লাইড সুইচ তৈরি করতে পারেন, যা খুবই সাধারণভাবে টগল ফাংশনালিটি প্রদান করে। নিচে এর একটি বেসিক উদাহরণ দেওয়া হলো:
<mat-slide-toggle [(ngModel)]="isChecked">Toggle Option</mat-slide-toggle>
এখানে, [(ngModel)]="isChecked" দ্বারা টগলের মানের (checked/unchecked) ট্র্যাকিং করা হচ্ছে। যখন টগল সুইচ করা হবে, তখন isChecked ভেরিয়েবলের মান আপডেট হবে।
আপনি যদি ডিফল্টভাবে টগল সুইচটিকে চেকড করতে চান, তবে checked অ্যাট্রিবিউট ব্যবহার করতে পারেন।
<mat-slide-toggle checked>Toggle Option</mat-slide-toggle>
এখানে, টগল সুইচ ডিফল্টভাবে চেকড অবস্থায় থাকবে।
MatSlideToggle এর টেক্সট এবং লেবেল কাস্টমাইজ করা সম্ভব। আপনি টেক্সট পরিবর্তন করতে পারেন এবং প্রয়োজন অনুযায়ী আরো স্টাইল যোগ করতে পারেন।
<mat-slide-toggle [(ngModel)]="isChecked">Enable Feature</mat-slide-toggle>
এখানে, টগল সুইচে "Enable Feature" লেখা প্রদর্শিত হবে।
Angular Material স্লাইড টগল কম্পোনেন্টটি কাস্টম স্টাইল দিয়ে সুন্দরভাবে সাজানো যায়। আপনি CSS বা SCSS ব্যবহার করে টগলের রঙ, আকার এবং অন্যান্য বৈশিষ্ট্য কাস্টমাইজ করতে পারেন।
.mat-slide-toggle .mat-slide-toggle-bar {
background-color: #ff4081;
}
.mat-slide-toggle-checked .mat-slide-toggle-bar {
background-color: #4caf50;
}
এখানে, টগল সুইচের unchecked অবস্থায় পিঙ্ক রঙ এবং checked অবস্থায় সবুজ রঙ প্রদর্শিত হবে।
যদি আপনি টগল সুইচটিকে নিষ্ক্রিয় করতে চান, তাহলে disabled অ্যাট্রিবিউট ব্যবহার করতে হবে।
<mat-slide-toggle disabled>Disabled Toggle</mat-slide-toggle>
এখানে, "Disabled Toggle" টগল সুইচ নিষ্ক্রিয় থাকবে এবং ব্যবহারকারী এটি ইন্টারঅ্যাক্ট করতে পারবে না।
আপনি (change) ইভেন্ট ব্যবহার করে টগল সুইচ পরিবর্তন হওয়ার সাথে সাথে একটি ফাংশন বা লজিক চালাতে পারেন।
<mat-slide-toggle [(ngModel)]="isChecked" (change)="onToggleChange($event)">Enable Notifications</mat-slide-toggle>
onToggleChange(event) {
console.log('Toggle value changed:', event.checked);
}
এখানে, onToggleChange() ফাংশনটি কল হবে যখন টগল সুইচ পরিবর্তিত হবে এবং টগল এর মান event.checked এর মাধ্যমে পাওয়া যাবে।
mat-slide-toggle ব্যবহার করা খুবই সহজ এবং এটি Material Design এর একটি অংশ, তাই এটি অ্যাপ্লিকেশনে সুন্দর এবং একীভূত ডিজাইন প্রদান করে।Angular Material MatSlideToggle একটি সহজ এবং কার্যকরী কম্পোনেন্ট যা Material Design এর আদর্শ অনুসরণ করে। এটি ব্যবহারকারীদের জন্য একটি সুন্দর এবং ইন্টারেক্টিভ টগল সুইচ প্রদান করে, যা চালু/বন্ধ বা অথরাইজেশন স্টেট পরিবর্তন সহ বিভিন্ন কাজে ব্যবহৃত হতে পারে। Angular Material এর স্লাইড টগল কম্পোনেন্ট কাস্টমাইজ, স্টাইল এবং ইভেন্ট হ্যান্ডলিং এর মাধ্যমে অত্যন্ত শক্তিশালী এবং ফ্লেক্সিবল হয়ে ওঠে।
Angular Material এর MatSlideToggle কম্পোনেন্টটি একটি স্লাইড টগল সুইচ তৈরি করার জন্য ব্যবহৃত হয়, যা সাধারণত দুটি অবস্থা (যেমন, চালু বা বন্ধ, সক্ষম বা অক্ষম) সুইচ করার জন্য ব্যবহৃত হয়। এটি একটি খুব সাধারণ ইউআই উপাদান যা ব্যবহারকারীকে একটি অপশন সক্রিয় বা নিষ্ক্রিয় করতে সক্ষম করে, সাধারণত বাইনারি সিদ্ধান্ত (যেমন: Yes/No, On/Off) নিতে।
এটি সহজেই ব্যবহারযোগ্য এবং স্টাইলিশ, এবং আপনি Angular Material এর সাহায্যে দ্রুত স্লাইড টগল তৈরি করতে পারবেন।
প্রথমে, আপনার Angular অ্যাপ্লিকেশনে Angular Material ইন্সটল করতে হবে। এটি যদি আগে থেকেই ইন্সটল না করা থাকে, তবে নিচের কমান্ডটি ব্যবহার করে ইন্সটল করুন:
npm install @angular/material
এখন আপনাকে MatSlideToggleModule ইমপোর্ট করতে হবে আপনার app.module.ts ফাইলে:
import { MatSlideToggleModule } from '@angular/material/slide-toggle';
import { MatFormFieldModule } from '@angular/material/form-field';
@NgModule({
imports: [
MatSlideToggleModule,
MatFormFieldModule
]
})
export class AppModule {}
এখন আপনি mat-slide-toggle ট্যাগ ব্যবহার করে স্লাইড টগল সুইচ তৈরি করতে পারেন।
<mat-slide-toggle>Enable Feature</mat-slide-toggle>
এটি একটি সাধারণ টগল সুইচ তৈরি করবে, যেটি "Enable Feature" নামে লেবেল থাকবে। ব্যবহারকারী এটি টগল করতে পারবেন।
আপনি checked অ্যাট্রিবিউট ব্যবহার করে টগল সুইচের ডিফল্ট অবস্থান সেট করতে পারেন (যেমন, সুইচটি চালু বা বন্ধ):
<mat-slide-toggle [checked]="isChecked">Enable Feature</mat-slide-toggle>
এখন, আপনি isChecked ভ্যারিয়েবলটি true বা false দিয়ে নিয়ন্ত্রণ করতে পারেন।
export class AppComponent {
isChecked = true; // সুইচটি ডিফল্টভাবে চালু থাকবে
}
আপনি (change) ইভেন্ট লিসেনার ব্যবহার করে স্লাইড টগল সুইচের অবস্থান পরিবর্তন ট্র্যাক করতে পারেন:
<mat-slide-toggle [(ngModel)]="isChecked" (change)="onToggleChange($event)">
Enable Feature
</mat-slide-toggle>
export class AppComponent {
isChecked = false;
onToggleChange(event: any) {
console.log('Toggle Changed:', event.checked);
}
}
এখানে, (change) ইভেন্ট ব্যবহার করে আপনি টগল সুইচের অবস্থা পরিবর্তনের সময় event.checked দ্বারা নতুন অবস্থা (true/false) পাচ্ছেন।
mat-slide-toggle এর মধ্যে আপনি কাস্টম লেবেল ব্যবহার করতে পারেন, যেমন "On" এবং "Off" বা অন্য যেকোনো টেক্সট:
<mat-slide-toggle [checked]="isChecked">
{{ isChecked ? 'On' : 'Off' }}
</mat-slide-toggle>
এটি টগল সুইচের অবস্থান অনুযায়ী "On" বা "Off" টেক্সট প্রদর্শন করবে।
আপনি [disabled] অ্যাট্রিবিউট ব্যবহার করে স্লাইড টগলকে অক্ষম (disabled) করতে পারেন:
<mat-slide-toggle [disabled]="isDisabled">Enable Feature</mat-slide-toggle>
export class AppComponent {
isDisabled = true; // টগল সুইচটি ডিফল্টভাবে নিষ্ক্রিয় থাকবে
}
এখানে isDisabled ভ্যারিয়েবলটি true হলে টগল সুইচটি অক্ষম হয়ে যাবে।
MatSlideToggle এর স্টাইল কাস্টমাইজ করতে Angular Material এর mat-slide-toggle ক্লাসের মাধ্যমে আপনি CSS ব্যবহার করতে পারেন। উদাহরণস্বরূপ, আপনি টগল সুইচের রঙ পরিবর্তন করতে পারেন:
mat-slide-toggle {
color: #FF5722; /* টগল সুইচের রঙ পরিবর্তন */
}
এছাড়া, আপনি mat-slide-toggle এর থিম এবং আউটপুট রঙ কাস্টমাইজ করতে পারেন এবং mat-toggle এর অবস্থান অনুযায়ী অ্যানিমেশন যোগ করতে পারেন।
Angular Material এর MatSlideToggle একটি অত্যন্ত শক্তিশালী এবং কাস্টমাইজযোগ্য কম্পোনেন্ট, যা ব্যবহারকারীদের বিভিন্ন অপশন সুইচ করার জন্য সহজ এবং আকর্ষণীয় উপায় প্রদান করে। এটি বিভিন্ন ধরনের পরিস্থিতিতে, যেমন ফিচার একটিভেশন বা ডিসএ্যাকটিভেশন, সিস্টেম সেটিংস কন্ট্রোল ইত্যাদিতে কার্যকরভাবে ব্যবহার করা যায়। ngModel, (change), এবং অন্যান্য অ্যাট্রিবিউটের মাধ্যমে আপনি ব্যবহারকারীর অ্যাকশন ট্র্যাক করতে পারেন এবং অ্যাপ্লিকেশনের মধ্যে ডাইনামিক ফিচার পরিবর্তন করতে পারেন।
Read more
or
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
Lorem ipsum dolor, sit amet consectetur adipisicing elit. Ducimus nihil, quo, quis minus aspernatur expedita, incidunt facilis aliquid inventore voluptate dolores accusantium laborum labore a dolorum dolore omnis qui? Consequuntur sed facilis repellendus corrupti amet in quibusdam ducimus illo autem, a praesentium.
1 hour ago
